package com.bytecodezz.jc.composestate

import android.os.Bundle
import android.widget.ImageButton
import android.widget.Space
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.bytecodezz.jc.composestate.ui.theme.JetpackComposeTheme
import com.bytecodezz.jc.composestate.vm.WellnessViewModel

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    WellnessScreen()
                }
            }
        }
    }
}

@Composable
fun WellnessScreen(
    modifier: Modifier = Modifier,
    wellnessViewModel: WellnessViewModel = viewModel()
) {
//    var list: MutableList<WellnessTask> = remember { getWellnessTasks().toMutableStateList() }
    Column(modifier = modifier) {
        StatefulCounter()
        WellnessTasksList(
            list = wellnessViewModel.tasks,
            onCheckedTask = { task, checked -> wellnessViewModel.changeTaskChecked(task, checked) },
            onCloseTask = { task -> wellnessViewModel.removeTask(task) })
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackComposeTheme {
        WellnessScreen()
    }
}

@Preview(showBackground = true)
@Composable
fun StatefulCounterPreview() {
    JetpackComposeTheme {
        StatefulCounter()
    }
}

@Preview(showBackground = true)
@Composable
fun WellnessTaskItemPreview() {
    JetpackComposeTheme {
        WellnessTaskItem("This is a task item.", true, { }, {})
    }
}

@Preview(showBackground = true)
@Composable
fun WellnessTasksListPreview() {
    JetpackComposeTheme {
        var list: MutableList<WellnessTask> = remember { getWellnessTasks().toMutableList() }
        WellnessTasksList(
            list = list,
            onCheckedTask = { task, checked -> task.checked.value = checked },
            onCloseTask = { list.remove(it) })
    }
}

//@Composable
//fun WaterCounter(modifier: Modifier = Modifier) {
//    var count by rememberSaveable() {
//        mutableStateOf(0)
//    }
////    val count2: MutableState<Int> = remember {
////        mutableStateOf(0)
////    }
//    Column(modifier = modifier.padding(16.dp)) {
//        if (count > 0) {
//            var showTask by remember {
//                mutableStateOf(true)
//            }
//            if (showTask) {
//                WellnessTaskItem(
//                    taskName = "Have you taken your 15 minute walk today?",
//                    onClose = { showTask = false })
//            }
//            Text(text = "You've had $count glasses.")
//        }
//        Row {
//            Button(
//                modifier = Modifier.padding(top = 8.dp),
//                onClick = { count++ },
//                enabled = count < 10
//            ) {
//                Text(text = "add")
//            }
//            Spacer(modifier = Modifier.width(12.dp))
//            Button(
//                modifier = Modifier.padding(top = 8.dp),
//                onClick = { count = 0 },
//                enabled = count > 0
//            ) {
//                Text(text = "clear")
//            }
//        }
//    }
//}

@Composable
fun StatelessCounter(count: Int, onIncrement: (Int) -> Unit, modifier: Modifier) {
    Column(modifier = modifier.padding(16.dp)) {
        if (count > 0) {
            Text(text = "You've had $count glasses.")
        }
        Button(
            modifier = Modifier.padding(top = 8.dp), onClick = { onIncrement(count + 1) },
            enabled = count < 10
        ) {
            Text(text = "add one")
        }
    }
}

@Composable
fun StatefulCounter(modifier: Modifier = Modifier) {
    var count by rememberSaveable {
        mutableStateOf(0)
    }
    StatelessCounter(count = count, onIncrement = { c -> count = c }, modifier = modifier)
}


@Composable
fun WellnessTaskItem(
    taskName: String,
    onClose: () -> Unit,
    modifier: Modifier = Modifier
) {
    var checked: Boolean by rememberSaveable {
        mutableStateOf(false)
    }
    WellnessTaskItem(
        taskName = taskName,
        checked = checked,
        onCheckedChange = { state -> checked = state },
        onClose = onClose,
        modifier = modifier
    )
}

@Composable
fun WellnessTaskItem(
    taskName: String,
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    onClose: () -> Unit,
    modifier: Modifier = Modifier
) {
    Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier) {
        Text(
            text = taskName, modifier = Modifier
                .padding(start = 16.dp)
                .weight(1.0f)
        )
        Checkbox(checked = checked, onCheckedChange = onCheckedChange)
        IconButton(onClick = { onClose.invoke() }) {
            Icon(imageVector = Icons.Filled.Close, contentDescription = null)
        }
    }
}

private fun getWellnessTasks() = List(30) { i -> WellnessTask(id = i, label = "Task # $i") }

data class WellnessTask(
    val id: Int,
    var checked: MutableState<Boolean> = mutableStateOf(false),
    val label: String
)


@Composable
fun WellnessTasksList(
    modifier: Modifier = Modifier,
    onCheckedTask: (WellnessTask, Boolean) -> Unit,
    onCloseTask: (WellnessTask) -> Unit,
    list: List<WellnessTask>
) {
    LazyColumn(modifier = modifier) {
        items(items = list, key = { task -> task.id }) { task ->
            WellnessTaskItem(
                taskName = task.label,
                checked = task.checked.value,
                onCheckedChange = { checked -> onCheckedTask(task, checked) },
                onClose = { onCloseTask(task) })
        }
    }
}
